<template>
    <div class="pushList" ref="pushListDom">
        <div class="card" v-for="item in list" :key="item.id">
            {{ item.id }}
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";
// 不能直接引入js，需要在env.d.ts进行主动引入，declare module 'xxx'路径或者模块名
import anime from 'animejs'

// 列表数据
const list = ref(Array());
// 定时器
const interval = ref(0)
// 获取dom
const pushListDom = ref();
// 挂载后
onMounted(() => {
    // 初始化
    init();
});
// 销毁前
onUnmounted(() => {
    // 清除定时器
    clear();
});

// 方法

// 初始化
const init = () => {
    interval.value = window.setInterval(() => {
        list.value.unshift({
            id: new Date().getTime()
        });
        // 110是单个区块的高度  到时候根据自己的写死就行了
        pushListDom.value.scrollTop = 110;

        // 使用animejs做动画
        anime({
            targets: pushListDom.value, // 目标
            scrollTop: 0, // scrollTop变为0
            duration: 500, // 持续时间 ms
            easing: 'easeInOutQuad',
        })
    }, 1000)

}
// 清除定时器
const clear = () => {
    if (interval.value) {
        clearInterval(interval.value);
        interval.value = 0;
    }
}
</script>
<style lang="less" scoped>
.pushList {
    width: 200px;
    height: 430px;
    margin: 100px auto;
    border: 1px solid red;
    overflow-y: auto;

    // 隐藏滚动条
    &::-webkit-scrollbar {
        display: none;
    }

    .card {
        width: 100%;
        height: 100px;
        border: 1px solid #000;
        margin-bottom: 10px;
    }
}
</style>